<template>
  <div class="item-wrapper" ref="itemWrapper" :class="wrapperClass" @click="select(option.id)" v-show="!filterFields.includes(option.id)">
    <template v-if="option.id==='productPicture'">
      <div class="tem-img" :class="activeClass">
        <i class="iconfont icon-image-fill2"></i>
        <p>{{$t('superQrcode.configurationItem.productPicture')}}</p>
      </div>
    </template>
    <template v-else-if="option.id==='productIntroduction'">
      <div class="tem-item" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <div>{{$t('superQrcode.configurationItem.productIntroduce')}}</div>
      </div>
    </template>
    <template v-else-if="option.id==='productCard'">
      <div class="tem-item" :class="activeClass" style="min-height:70px;">
        <div class="tem-title"  style="margin-bottom:0;">
          <div v-show="!notShowTitle">{{option.title}}</div>
        </div>
        <ul class="tem-service">
          <li v-for="(item, index) in productCardList" :key="index">
            <div class="paas-icon" :style="{ background: item.color }">
              <i :class="['iconfont', item.icon]"/>
            </div>
            <p>{{item.cardField.name}}</p>
          </li>
        </ul>
      </div>
    </template>
    <template v-else-if="option.id==='selfService'">
      <div class="tem-item" :class="activeClass" style="min-height:70px;">
        <div class="tem-title self-service"  style="margin-bottom:0;">
          <div v-show="!notShowTitle">{{option.title}}</div>
          <div class="service-record" v-if="isGetProductEventList">{{$t('common.base.serviceRecord')}}<i class="iconfont icon-right"></i></div>
        </div>
        <ul class="tem-service">
          <li v-for="(item,index) in eventList" :key="item.id">
            <img :src="index | getSrc">
            <p>{{item.name}}</p>
          </li>
          <li v-for="(item, index) in paasList" :key="index">
            <img v-if="item.iconUrl" :src="item.iconUrl" class="paas-icon" />
            <div v-else class="paas-icon" :style="{ background: item.color }">
              <i :class="['iconfont', item.icon]"/>
            </div>
            <p>{{item.applicationName}}</p>
          </li>
        </ul>
      </div>
    </template>
    <template v-else-if="option.id==='productInformation'">
      <ul class="tem-item" :class="activeClass">
        <li class="tem-title" v-show="!notShowTitle">{{option.title}}</li>
        <li class="tem-info" v-for="item in showFields.filter(s=>s.showFlag=='1')" :key="item.fieldName">
          <span class="tem-info-left">{{item.displayName}}：</span>
        </li>
      </ul>
    </template>
    <template v-else-if="option.id==='productVideo'">
      <div class="tem-item" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <p class="video-name">{{$t('superQrcode.configurationItem.videoName')}}</p>
        <div class="tem-video">
          <i class="iconfont icon-kaishi"></i>
        </div>
      </div>
    </template>
    <template v-else-if="option.id==='productInstructions'">
      <div class="tem-item" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <div class="tem-pdf">
          <span class="pdf-img" :style="superQrcodeImage5"></span>
          <div>
            <p class="pdf-name">{{$t('superQrcode.configurationItem.instructionBook')}}</p>
            <p class="pdf-size">20KB</p>
          </div>
        </div>
        <div class="tem-pdf">
          <span class="pdf-img" :style="superQrcodeImage5"></span>
          <div>
            <p class="pdf-name">{{$t('superQrcode.configurationItem.operationDocument')}}</p>
            <p class="pdf-size">10KB</p>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="option.id==='onlineService'">
      <div class="tem-customer" :class="activeClass">
        <img :class="selectId===6?'active-img':''" :src="superQrcodeImage1">
        <p>{{$t('superQrcode.configurationItem.consult')}}</p>
      </div>
    </template>
    <template v-else-if="option.id==='enterpriseInformation'">
      <div class="tem-item" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <div class="com-top">
          <div class="com-name">
            <img :src="logoUrl">
            <span>{{comData.tenantName}}</span>
          </div>
          <div class="com-des">
            <span>{{$t('superQrcode.configurationItem.companyPofile')}}</span>
            <p>{{comData.attribute.basicCompanyInfo}}</p>
          </div>
        </div>
        <div class="com-btm">
          <p v-if="comData.cellPhone"><span class="com-addr-title">{{$t('common.base.contactNumber')}}：</span><span class="com-addr-detail">{{comData.cellPhone}}<i class="iconfont icon-dianhua2"></i></span></p>
          <p v-if="comData.attribute.basicCompanyAddress"><span class="com-addr-title">{{$t('common.base.companyAddress')}}：</span><span class="com-addr-detail">{{comData.attribute.basicCompanyAddress}}</span></p>
        </div>
        <div id='mapWrapper'
          v-if="topIndex===2"
          style="height:166px;">
        </div>
      </div>
    </template>
    <template v-else-if="option.id==='knowledgeBase'">
      <div class="tem-item tem-knowledge" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <ul>
          <li :style="superQrcodeImage6">
            <p>{{$t('product.qrcodeSetting.phoneContent.text7')}}</p>
            <div>
              <span>{{$t('common.base.createUser')}}</span>
              <span>
                {{$t('common.base.read')}}
                <span>1.2W</span>
              </span>
            </div>
          </li>
          <li :style="superQrcodeImage7">
            <p>{{$t('product.qrcodeSetting.phoneContent.text7')}}</p>
            <div>
              <span>{{$t('common.base.column.createPerson')}}</span>
              <span>
                {{$t('common.base.read')}}
                <span>1.2W</span>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <template v-else-if="option.id==='productPart'">
      <div class="tem-item tem-part" :class="activeClass">
        <div class="tem-title">
          <span v-show="!notShowTitle">{{option.title}}</span>
          <span class="more">{{ $t('common.base.more') }} ></span>
        </div>
        <!-- TODO: 图片中含有中文，需要确认 -->
        <img :src="superQrcodeImage2">
      </div>
    </template>
    <template v-else-if="option.id === 'companyInfo'">
      <div class="tem-item" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <div class="companyInfo">
          <img v-if="companyInfo.logo" :src="companyInfo.logo" alt="" />
          <img v-else src="https://file.shb.ltd/shb-resource/DefaultCompany.png" alt="" />
          <h2>{{ companyInfo.name }}</h2>
          <div class="companyInfo-main">
            <div v-if="companyInfo.phone">
              <span>{{$t('superQrcode.configurationItem.companyTel')}}：</span>
              <span>{{ companyInfo.phone }}
                <i class="iconfont icon-dianhua2"></i
              ></span>
            </div>
            <div v-if="companyInfo.email">
              <span>{{$t('superQrcode.configurationItem.companyMail')}}：</span>
              <span>{{ companyInfo.email }}</span>
            </div>
            <div v-if="companyInfo.address">
              <span>{{$t('superQrcode.configurationItem.companyAddress')}}：</span>
              <span>{{ companyInfo.address | interceptString }} </span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="option.id==='onlineMall'">
      <div class="tem-mall">
        <img :src="superQrcodeImage3">
      </div>
    </template>
    <template v-else-if="option.id==='productRegister'">
      <div class="prod-reg" :class="activeClass">
        <img class="prod-reg-img" :src="superQrcodeImage4" alt=""/>
        <span class="prod-reg-title">{{option.title}}</span>
        <div class="prod-reg-add-btn"><i class="iconfont icon-right1"></i></div>
      </div>
    </template>
    <template v-else-if="option.id.includes('images')">
      <div class="tem-item tem-part" :class="activeClass">
        <div class="tem-title" v-show="!notShowTitle">{{option.title}}</div>
        <div class="tem-image">
          <img v-for="item in imageArray" :key="item.id" :src="item.url">
        </div>
      </div>
    </template>
    <template v-else-if="option.id==='projectManage'">
      <div class="tem-item tem-part" :class="activeClass">
        <div class="tem-title">
          <div>
            <span v-show="!notShowTitle">{{option.title}}</span>
          </div>
          <span class="more" v-if="projectInfo.taskFieldData.length">{{ $t('common.projectManage.seeTaskTip') }}</span>
        </div>
        <li class="tem-info" v-for="item in projectInfo.projectFieldData" :key="item.fieldName">
          <span class="tem-info-left">{{item.displayName}}：</span>
        </li>
      </div>
    </template>
  </div>
</template>

<script>
import { getOssUrl, getLocalesOssUrl } from '@src/util/assets'
import i18n from '@src/locales';
const tenantDefaultLogoImg = getOssUrl('/tenant_defaultLogo.jpg')
const icon0 = getOssUrl('/service/icon0.png')
const icon1 = getOssUrl('/service/icon1.png')
const icon2 = getOssUrl('/service/icon2.png')
const icon3 = getOssUrl('/service/icon3.png')
const icon4 = getOssUrl('/service/icon4.png')
const iconsImg = [icon0, icon1, icon2, icon3, icon4]

const superQrcodeImage1 = getOssUrl('/customer_ser.png')
const superQrcodeImage2 = getLocalesOssUrl('/partDemo2.png')
const superQrcodeImage3 = getLocalesOssUrl('/mallDemo.png')
const superQrcodeImage4 = getOssUrl('/prodregscan.png')

const superQrcodeImage5 = `background-image: url(${getOssUrl('/file-icon.png')});`
const superQrcodeImage6 =`background:url(${getOssUrl('/wiki_bg_red.png')}) no-repeat center center;`
const superQrcodeImage7 =`background:url(${getOssUrl('/wiki_bg_green.png')}) no-repeat center center;`






export default {
  name:'phone-content',
  props:{
    productCardList: {
      type: Array,
      default: () => [],
    },
    option:{
      type:Object,
      default:{}
    },
    topIndex:{
      type:Number,
      default:1
    },
    eventList:{
      type:Array,
      default:[]
    },
    paasList:{
      type:Array,
      default:[]
    },
    selectId:{
      type:String,
      default:null
    },
    scrollFlag:{
      type:Boolean,
      default:false
    },
    showFields:{
      type:Array,
      default:()=>[]
    },
    comData:{
      type:Object,
      default:()=>{}
    },
    imageArray:{
      type:Array,
      default:()=>[]
    },
    filterFields: {
      type: Array,
      default: () => []
    },
    companyInfo: {
      type: Object,
      default:() => ({})
    },
    projectInfo: {
      type: Object,
      default:() => ({})
    },
  },
  data(){
    return {
      superQrcodeImage1,
      superQrcodeImage2,
      superQrcodeImage3,
      superQrcodeImage4,
      superQrcodeImage5,
      superQrcodeImage6,
      superQrcodeImage7
    }
  },
  computed:{
    wrapperClass(){
      let clz='';
      // if(this.selectId===this.option.id && this.selectId!=='onlineService'){
      //   clz='item-active'
      // }
      if(this.option.id==='onlineMall'){
        clz+=' mall-wrapper';
      }
      if(this.option.id==='onlineService'){
        clz+=' service-wrapper'
      }
      return clz;
    },
    activeClass(){
      if(this.selectId===this.option.id && this.selectId!=='onlineService'){
        return 'item-active'
      }else return 'item-normal'
    },
    notShowTitle(){
      return this.option.notShowTitle
    },
    isGetProductEventList() {
      return this.option.isGetProductEventList
    },
    logoUrl(){
      if(this.comData.attribute.logoUrl) return this.comData.attribute.logoUrl;
      return tenantDefaultLogoImg
    }
  },
  watch:{
    scrollFlag(){
      if(this.selectId !== this.option.id) return
      const clientRect=this.$refs.itemWrapper.getBoundingClientRect();
      this.$emit('selectItem',this.selectId,clientRect);
    }
  },
  filters:{
    getSrc(index){
      return iconsImg[index % 5]
    },
    interceptString(value) {
      if (!value) return;

      return value.length > 36 ? `${value.substring(0, 36)}...` : value;
    },
  },
  methods:{
    select(id){
      const clientRect=this.$refs.itemWrapper.getBoundingClientRect();
      this.$emit('selectItem',id,clientRect);
    }
  }
}
</script>

<style lang="scss" scoped>
ul{
  padding-left: 0;
}
p{
  margin-bottom: 0;
}
.item-normal{
  border: 2px solid transparent;
}
.item-wrapper{
  position: relative;
  cursor: all-scroll;
  border: 2px solid transparent;
  min-height: 70px;
}
.item-active{
  border: 2px solid $color-primary;
}

.tem-item{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;

  .tem-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .tem-info{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;

    .tem-info-left{
      color: $text-color-secondary;
      display: inline-block;
      width: calc(100% - 80px);
    }
  }
  .self-service {
    position: relative;
    .service-record {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
      color: #50749A;
      font-weight: normal
    }
  }
  .tem-service{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 23%;
      height: 70px;
      text-align: center;
      padding-top: 10px;
      margin-top: 10px;
      margin-right: 2%;
      border-radius: 6px;
      font-size: 10px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      p{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      img{
        width:45%;
        margin-bottom: 5px;
      }
    }
    .paas-icon {
      border-radius: 8px;
      width:45%;
      height: 27.72px;
      line-height: 27.72px;
      margin: auto;
      margin-bottom: 5px;
      .iconfont {
        color:#fff;
        font-size: 14px;
      }
    }
    .card-iconfont{
      background: $color-primary;
    }
  }
  .video-name{
    margin-bottom: 10px;
  }
  .tem-video{
    height:150px;
    background-color: $text-color-gray;
    text-align: center;
    line-height: 150px;
    border-radius: 10px;
    i{
      color: #fff;
      font-size: 30px;
    }
  }
  .tem-pdf{
    background-color: $bg-color-l2;
    border: 1px solid $color-border-l3;
    display: flex;
    height: 54px;

    span{
      width: 30px;
      height: 30px;
      margin: 8px;
      background-position: left 0 top -150px;
      background-size: 30px;
    }

    .pdf-name{
      margin-top: 10px;
      margin-bottom: 0;
    }
    .pdf-size{
      font-size: 12px;
      color: $text-color-gray;
    }
    &:nth-child(2){
      margin-bottom: 10px;
    }
  }
  .com-top{
    background-color: $bg-color-l3;
    border-radius: 6px;
    padding: 12px;
    .com-name{
      padding-bottom: 10px;
      display: flex;
      img{
        width: 40px;
        height: 40px;
        border-radius: 6px;
        margin-right: 10px;
      }
      span{
        font-weight: bold;
        font-size: 16px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .com-des{
      color: $text-color-secondary;
      margin-top: 2px;
      padding-top: 10px;
      border-top: 1px solid $color-border-l3;
      p{
        margin-top: 6px;
      }
    }
  }
  .com-btm{
    background-color: $bg-color-l3;
    padding: 12px;
    margin-top: 10px;
    color: $text-color-secondary;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    p{
      line-height: 20px;
      span{
        display: inline-block;
        vertical-align: text-top;
      }
      .com-addr-title{
        width: 74px;
      }
      .com-addr-detail{
        color: $text-color-primary;
        width: calc(100% - 74px);
        i{
          font-size: 12px;
          color: $color-main;
        }
      }
    }
  }
}
.tem-img{
  height: 150px;
  text-align: center;
  color: $text-color-secondary;
  background: #eee;
  padding-top: 24px;
  margin-bottom: 10px;
  i{
    font-size: 44px;
  }
}
.tem-customer{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  img{
    width: 56px;
    height: 56px;
    border: 1px solid red;
    border-radius: 50%;
  }
  .active-img{
    border:2px solid $color-primary;
  }
  p{
    position: absolute;
    bottom: 0;
    font-size: 10px;
    color: #fff;
    background-color: rgba(255,0,0,0.3);
    text-align: center;
    width: 100%;
  }
}
.tem-knowledge{
  ul{
    display: flex;
    justify-content: space-between;
    li{
      width: 48%;
      height: 70px;
      padding: 10px;

      p{
        font-size: 12px;
        font-weight: bold;
      }
      div{
        color: $text-color-secondary;
        display: flex;
        justify-content: space-between;
        position: relative;
        top: 20px;
        font-size: 10px;

        span{
          span{
            color: $text-color-primary;
          }
        }
      }

      &:nth-child(1){
        background-size: 100% 100%;
      }
      &:nth-child(2){
        background-size: 100% 100%;
      }
    }
  }
}
.tem-part{
  .tem-title{
    display: flex;
    justify-content: space-between;
    line-height: 22.4px;
    span:nth-child(2){
      font-size: 14px;
      font-weight: normal;
      color: $color-primary;
    }
  }
  img{
    width: 100%;
  }
}
.tem-mall{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
  }
}
.tem-image{
  min-height: 60px;
  background-color: #fff;

  img{
    width: 100%;
  }
}
.mall-wrapper{
  height: 100%;
  display: flex;
  align-items: center;
}
.service-wrapper{
  position: fixed;
  right: calc(50% - 140px);
  bottom:60px;
  z-index: 1;
}
.prod-reg{
  height: 68px;
  color: #262626;
  font-family: PingFangSC-Regular, PingFang SC;
  margin: 0 auto 10px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFF9F0;
  &-img {
    width: 40px;
    height: 40px;
  }
  &-title {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 12px;
    flex: 1;
  }
  &-add-btn {
    .iconfont {
      font-size: 14px;
      color: #8c8c8c;
    }
  }
}

.companyInfo {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4FFFF 100%);
  width: 100%;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 38px;

  img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
  }

  h2 {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    margin: 16px 0 32px;
  }

  &-main {
    width: 100%;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #595959;
    line-height: 22px;

    div {
      margin-bottom: 2px;
      display: flex;
      height: auto;

      span:first-child {
        width: 68px;
      }

      span:last-child {
        width: calc(100% - 68px);
        line-height: 18px;
      }

      i {
        font-size: 12px;
        margin-left: 6px;
        color: $color-primary-light-6;
      }
    }
  }
}
</style>
